<template>
  <div class="page">
    <van-nav-bar title="地址列表" left-arrow @click-left="$router.go(-1)" :fixed="true"/>
    <div class="header"></div>
    <div v-if="addressList && addressList.length" class="address_ul">
      <div v-for="(item,index) in addressList" class='address_li bg-white'>
        <div class='addressx'>
          <div class='addressName'>收货人：{{item.name}}<span class='addressphone'>{{item.mobile}}</span>
          </div>
          <div class='addressLock'>
            收货地址：{{item.province_name}}{{item.city_name}}{{item.district_name}}{{item.address}}
          </div>
        </div>
        <div class='addressc flex align-center'>
          <div @click="setDefault(item,index)" class='flex align-center'>
            <van-icon v-if="item.is_default==1" class="text-blue text-f22" name="checked"
                      style="line-height: inherit;"/>
            <van-icon v-else class="text-gray text-f22" name="circle" style="line-height: inherit;"/>
            <span class="padding-left-xs">设为默认地址</span>
          </div>
          <div class="flex align-center">
            <router-link :to="'/index/basics/address/setting?id='+item.id">
              <div class="flex align-center" style="color: #333333">
                <van-icon size="18" name="edit"/>
                <span class="padding-left-xs inline-block">编辑</span>
              </div>
            </router-link>
            <div @click="delAddress(item,index)" class="flex align-center padding-left">
              <van-icon size="18" name="delete"/>
              <span class="padding-left-xs inline-block">删除</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <van-empty description="暂无地址-快去添加吧^_^" />
    </div>

    <div class="address-link flex justify-center padding-lr-lg">
      <router-link class="flex flex-sub" :to="'/index/basics/address/setting'">
        <van-button block round type="info">添加地址</van-button>
      </router-link>
    </div>
  </div>
</template>

<script type="es6">
export default {
  name: "",
  components: {},
  data() {
    return {
      addressList: [
        {
          "id": 10088,
          "name": "ok-mini",
          "mobile": "13915452585",
          "email": "",
          "address": "双流教师公寓",
          "zip": "",
          "is_default": 1,
          "province_name": "四川",
          "city_name": "成都市",
          "district_name": "武侯区"
        },
        {
          "id": 10089,
          "name": "波比",
          "mobile": "13915452585",
          "email": "",
          "address": "详细地址",
          "zip": "",
          "is_default": 0,
          "province_name": "四川",
          "city_name": "成都市",
          "district_name": "武侯区"
        },
        {
          "id": 10089,
          "name": "波比",
          "mobile": "13915452585",
          "email": "",
          "address": "波比的比特",
          "zip": "",
          "is_default": 0,
          "province_name": "四川",
          "city_name": "成都市",
          "district_name": "武侯区"
        }
      ]
    };
  },
  mounted() {
  },
  methods: {
    //删除地址
    async delAddress(item, index) {
      this.$dialog.confirm({
        title: '温馨提示',
        message: '您确定要删除该地址？',
      }).then(async () => {
        this.$loading("正在删除...");
        setTimeout(() => {
          this.addressList.splice(index, 1);
          this.$loadinghide();
        }, 500);
      }).catch(() => {

      });
    },

    //设为默认地址
    async setDefault(item, index) {
      this.$loading("正在设置");
      setTimeout(() => {
        this.addressList.forEach((list_itme, list_index) => {
          list_itme.is_default = 0;
        });
        this.addressList[index]['is_default'] = 1;
        this.$loadinghide();
      }, 500);
    }
  }
}
</script>

<style lang="scss" scoped>
.default_address {
  background: #0099FF;
  color: #ffffff;
  font-size: 12px;
  padding: 0 5px;
  border-radius: 10px;
  margin-left: 5px;
}

.header {
  background-image: url("");
  background-repeat: no-repeat;
  width: 100%;
  height: 2px;
  background-size: 100% 100%;
  position: fixed;
  top: 46px;
}
.address-link{
  background: #fff;
  position: fixed;
  padding: 10px 20px;
  bottom: 0;
  left: 0;
  right: 0;
}
.address_ul {
  margin-top: 46px;
  margin-bottom: 100px;

  .address_li {
    width: 100%;
    color: #333333;
    background-color: #ffffff;
    margin-bottom: 10px;
    font-size: 14px;
  }

  .addressc {
    justify-content: space-between;
    padding: 0 10px;
    height: 48px;
    line-height: 48px;
  }

  .addressx {
    padding: 0 10px 18px 10px;
    border-bottom: 1px solid #EEEEEE;
  }

  .addressName {
    padding: 20px 0 8px 0;
    font-weight: bolder
  }

  .addressphone {
    margin-left: 15px;
  }

  .addressLock, .addressName {
    width: 365px;
  }

  .footer {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    text-align: center;
    color: #ffffff;
    background-color: #eb4e2b;
    position: fixed;
    bottom: 0;
  }

  .footer .system-address {
    width: 50%;
    float: left;
  }

  .footer .weixin-address {
    width: 50%;
    float: right;
    background-color: #f3b23e
  }
}
</style>